<template>
  <div class="header">
    <div class="header_box">
      <span><nuxt-link to="/">首页 |</nuxt-link></span>
      <span>
        <nuxt-link to="/law" :class="index === 0 ? 'highLight' : ''">
          法律法规 |</nuxt-link
        >
      </span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <nuxt-link to="/policy" :class="index === 1 ? 'highLight' : ''"
            >中央政策 |</nuxt-link
          >
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, index) in selectList" :key="index">{{
            item
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span
        ><nuxt-link to="/theory" :class="index === 2 ? 'highLight' : ''"
          >理论研究 |</nuxt-link
        ></span
      >

      <span
        ><nuxt-link to="/industry" :class="index === 3 ? 'highLight' : ''"
          >行业前沿 |</nuxt-link
        ></span
      >
      <el-dropdown>
        <span class="el-dropdown-link">
          <nuxt-link to="/case" :class="index === 4 ? 'highLight' : ''">
            经典案例 |</nuxt-link
          >
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>科技数据中心</el-dropdown-item>
          <el-dropdown-item>网上成果对接会</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span
        ><nuxt-link to="/query" :class="index === 5 ? 'highLight' : ''"
          >标准查询 |</nuxt-link
        ></span
      >

      <span>
        <nuxt-link to="/contact" :class="index === 6 ? 'highLight' : ''"
          >关于我们 |</nuxt-link
        ></span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectList: [
        "国行标准申报",
        "团体标准综合服务",
        "标准良好行为评价",
        "企业标准服务",
        "标准化培训",
      ],
      index:'',
    };
  },
  mounted() {
    this.$forceUpdate();
  },
  watch: {
    $route() {
      // if (this.$route.name == "law") {
      //   this.index = 0;
      // }
      // if (this.$route.name.indexOf("policy") > -1) {
      //   this.index = 1;
      // }
      // if (this.$route.name.indexOf("theory") > -1) {
      //   this.index = 2;
      // }
      // if (this.$route.name.indexOf("industry") > -1) {
      //   this.index = 3;
      // }
      // if (this.$route.name.indexOf("case") > -1) {
      //   this.index = 4;
      // }
      // if (this.$route.name.indexOf("query") > -1) {
      //   this.index = 5;
      // }
      // if (this.$route.name.indexOf("contact") > -1) {
      //   this.index = 6;
      // }
      switch (this.$route.name) {
        case "law":
          this.index = 0;
          break;
        case "policy":
          this.index = 1;
          break;
        case "theory":
          this.index = 2;
          break;
        case "industry":
          this.index = 3;
          break;
        case "case":
          this.index = 4;
          break;
        case "query":
          this.index = 5;
          break;
        case "contact":
          this.index = 6;
      }
    },
  },
};
</script>

<style lang="scss" scpoed>
@import "~/assets/css/main.scss";
.header {
  color: #b0b0b0;
  background-color: #337ab7;
  font-size: rem(20);
  height: 50px;
  line-height: 50px;
  padding: 0 rem(250);
  .highLight {
    color: #fff;
  }
  &_box {
    margin: 0 auto;
    span {
      a {
        color: #b0b0b0;
        transition: all 0.5s;
        &:hover {
          color: #fff;
          // transform: scale(3);
          font-size: rem(25);
          cursor: pointer;
        }
      }
    }
    .el-dropdown {
      font-size: rem(20);
      color: #b0b0b0;
    }
    .el-dropdown-link {
      cursor: pointer;
    }
    .el-icon-arrow-down {
      font-size: rem(16);
    }
  }
}
</style>
